<template>
  <div class="employee-container">
    <div class="left">
      <div class="l-search">
        <el-input
          v-model="form.keyword"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          @input="keywordChange2"
        />
      </div>
      <div class="l-tree">
        <el-tree ref="treeRef" :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false" highlight-current node-key="id" @current-change="currentChange" />
      </div>
    </div>
    <div class="right">
      <div class="r-btns">
        <el-row type="flex" justify="end">
          <el-button size="mini" type="primary" @click="addEmployee">添加员工</el-button>
          <el-button size="mini" @click="importExcel">excel导入</el-button>
          <el-button size="mini" @click="exportExcel">excel导出</el-button>
        </el-row>
      </div>
      <div class="r-table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="staffPhoto"
            label="头像"
            width="100"
            align="center"
          >
            <template v-slot="{ row }">
              <!-- <el-avatar :size="60" :src="row.staffPhoto" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
                <img src="../../assets/common/head.jpg">
              </el-avatar> -->
              <el-avatar v-if="row.staffPhoto" size="large" :src="row.staffPhoto" />
              <div v-else class="avatar-parent">
                <span class="avatar-span">{{ row.username?.charAt(0) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
          >
            <template v-slot="{ row }">
              <span>{{ row.formOfEmployment === 1 ? '正式' : '非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
          />
          <el-table-column
            prop="mobile"
            label="操作"
            width="180"
          >
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="confirm(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :current-page="form.page"
          :page-size="form.pagesize"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <importExcel :show-excel-dialog.sync="showDialog" @upload-succes="getEmployeeList">
      <h3>测试自定义组件里面放东西</h3>
    </importExcel>

    <!-- 分配角色的弹窗 -->
    <el-dialog title="分配角色" :visible.sync="showRoleDialog" :append-to-body="true" @close="close">
      <el-form ref="ruleForm">
        <el-checkbox-group v-model="roleIds">
          <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>

        <el-form-item label-width="150px">
          <el-button type="primary" @click="roleIdAssign">确定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department'
import { getEmployeeListRequest, userExportRequest, deleteEmployeeRequest, getEmployeeInfoRequest, assignRolesRequest } from '@/api/employee'
import { transformListToTree } from '@/utils'
import { debounce } from 'lodash-es' // 节流 throttle  克隆/深拷贝 cloneDeep
import { saveAs } from 'file-saver'
import importExcel from './components/import-excel.vue'
// import { getRoleListRequest } from '@/api/role'
import { getEnabledRoleListRequest } from '@/api/role'

export default {
  name: 'Employee',
  components: {
    importExcel
  },
  data() {
    return {
      form: {
        page: 1,
        pagesize: 10,
        keyword: '',
        departmentId: null
      },
      total: 0,
      input2: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      timerId: null,
      showDialog: false,
      showRoleDialog: false,
      roleIds: [],
      roleList: [],
      currentEmployeeId: null
    }
  },
  created() {
    this.companyDepartmen()
    this.keywordChange = debounce(this.keywordChange, 500)

    // 有些时候函数里面的 this执行有问题， 我们可以在created里面，通过bind手动改变this的指向
    // apply call bind  函数的作用 + 参数 + 返回值  从这两方面回答
    // this.fn = this.fn.bind(this)
    // fn()  fn.call()  fn.apply()   fn.bind()
  },
  methods: {
    close() {
      this.showRoleDialog = false
    },
    async assignRole(id) {
      this.currentEmployeeId = id
      this.showRoleDialog = true
      // 下面的角色列表请求，默认可以不传参数，如果不传，默认请求的每页10条数据，那么就会造成一些数据丢失
      // 在工作里面，一般给每页显示数据条数，100或者 1000
      // const res = await getRoleListRequest({ pagesize: 1000 })
      const res = await getEnabledRoleListRequest()
      this.roleList = res.data

      // 根据员工id获取到改员工的 所具有的 角色信息
      const res2 = await getEmployeeInfoRequest(id)
      this.roleIds = res2.data.roleIds
    },
    fn() {},
    async companyDepartmen() {
      const res = await companyDepartmentRequest()
      this.data = transformListToTree(res.data, 0)

      this.form.departmentId = this.data[0].id
      // 获取了树形组件的 所有数据以后， 将第一个数据高亮显示
      // this.$refs.tree.setCheckedKeys([3])
      // tree组件的 勾选 和 当前项选中
      // this.$refs.treeRef.setCurrentKey([1])
      // 应该在dom准备好了以后，再去操作tree组件
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
      })

      // 在这个位置去发获取 角色列表的 请求
      // const res1 = await getEmployeeListRequest(this.form)
      // this.tableData = res1.data.rows
      // this.total = res1.data.total

      this.getEmployeeList()
    },
    async getEmployeeList() {
      const res1 = await getEmployeeListRequest(this.form)
      this.tableData = res1.data.rows
      this.total = res1.data.total
    },
    currentChange(item) {
      // 每次左边选择新部门的时候，都要从第一页开始请求
      this.form.page = 1
      this.form.departmentId = item.id
      this.getEmployeeList()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.getEmployeeList()
    },
    // 监听输入框文字改变，发请求
    keywordChange() {
      // 防抖：只执行最后一次
      // 节流：只执行一次
      this.getEmployeeList()
    },
    // 手写防抖
    keywordChange2() {
      // 只执行最后一次， 前面的执行 都需要先清空 定时器。
      clearTimeout(this.timerId)
      this.timerId = setTimeout(() => {
        console.log(111)
        // this.getEmployeeList()
      }, 1000)
    },
    // keywordChange1: debounce(function() {
    //   // 这种写法是错误，网上有很多这种答案，
    //   // 因为这个写法，当你组件复用的使用，这个函数只有同一个地址，会有复用函数的bug
    //   // 正确写法， 去created里面将函数 重新用debounce 返回的赋值一下
    // }, 300)
    importExcel() {
      this.showDialog = true
    },
    async exportExcel() {
      const res = await userExportRequest()
      // res是一个blob二进制的数据，  需要使用一个前端插件 file-saver
      saveAs(res, '所有员工信息.xlsx')
    },
    async confirm(id) {
      await deleteEmployeeRequest(id)
      this.$message.success({ message: '删除成功' })
      // 删除成功以后，刷新页面
      this.getEmployeeList()
    },
    addEmployee() {
      // 显示原型 prototype   隐式原型 __proto__
      // this.$router这个是路由实例对象，上面看不见push方法
      // 去的是 router的构造函数的 原型对象上面去找的，
      // 因为js的底层告诉我们， 原型链上面的属性和方法，都是所有对象实例 所共享的
      // console.log(this.$route, this.$router)
      // const arr = [1, 2, 3]
      // Array.prototype
      // arr.push(4)
      this.$router.push('/employee/detail')
    },
    async roleIdAssign() {
      const res = await assignRolesRequest({
        id: this.currentEmployeeId,
        roleIds: this.roleIds
      })
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  min-height: 50vh;
  display: flex;
  margin: 20px;
  .left {
    padding: 20px;
    flex: 0 0 300px;
    width: 500px;
    // background-color: lightblue;
    border-right: 1px #e4dada solid;
    .l-search {
      margin-bottom: 15px;
    }
  }
  .right {
    padding: 20px;
    // 1 1 0%
    // flex 默认的属性 0 1 auto
    flex: 1;
    // background-color: lightsalmon;
    .avatar-parent {
      // css改不动的时候，就去改html的结构，加减结构
      width: 100%;
      .avatar-span {
        width: 40px;
        height: 40px;
        background-color: #49ff00;
        display: inline-block;
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
      }
    }
  }
}
</style>
